<template>
	<view>
		<!-- #ifdef H5 -->
		
		<cu-custom class="bgLiner" :isBack="true" style="position: fixed;top: 0; width: 100%;z-index: 9999;">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		<view style="padding-top: 45px;"></view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		
		<cu-custom :bgColor="'bgLiner'"  :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		<!-- #endif -->
		
		<view class="setup-con">
			<view class="setup-ul">
				<view class="setup-li" @tap="goUserDetail">
					<view class="setup-li-left">
						<image class="imgStyle" :src="userInfo.avatarUrl || defaultPic" mode=""></image>
						<text v-if="userInfo.id" class="textStyle">{{userInfo.nickName || '用户名' }}</text>
						<view v-else @tap.stop="goLogin">
							去登录
						</view>
					</view>
					<view class="setup-li-right">
						<uni-icons type="right" size="20" color="#C7C7C7"></uni-icons>
					</view>
				</view>
				<view class="setup-li" @tap="goUserDetail">
					<view class="setup-li-left">
						<text class="textStyle">账号设置</text>
					</view>
					<view class="setup-li-right">
						<uni-icons type="right" size="20" color="#C7C7C7"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="setup-ul" style="border-bottom: 7px solid #f8f8f8;">
				<navigator url="/pages/user/user-address/index">
					<view class="setup-li">
						
							<view class="setup-li-left">
								<text class="textStyle">收货地址</text>
							</view>
							<view class="setup-li-right">
								<uni-icons type="right" size="20" color="#C7C7C7"></uni-icons>
							</view>
						
					</view>
				</navigator>
			</view>
			
			<view class="setup-ul">
				<navigator url="" v-for="item in ulData" :key="item.id">
					<view class="setup-li">
						
							<view class="setup-li-left">
								<text class="textStyle">{{ item.name }}</text>
							</view>
							<view class="setup-li-right">
								<uni-icons type="right" size="20" color="#C7C7C7"></uni-icons>
							</view>
						
				</view>
				</navigator>
			</view>
			
			<view class="logout" @tap="logout">
				<text>退出登录</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageDesign: {
					pageName: '设置'
				},
				theme: getApp().globalData.theme, //主题
				userInfo: {},  //用户信息
				// 默认的空图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				ulData:[
					{
						id : 0,
						name : '账号安全',
						url:''
					},
					{
						id : 1,
						name : '增票资质',
						url:''
					},
					{
						id : 2,
						name : '家庭户设置',
						url:''
					},
					{
						id : 3,
						name : '功能反馈',
						url:''
					},
					{
						id : 4,
						name : '关于小左社区',
						url:''
					}
				]
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods:{
			// 获取用户信息
			getUserInfo() {
				let that = this;
				this.$store.dispatch("GetInfo").then((res) => {
					that.userInfo = res
				}).catch(() => {})
			},
			// 跳转登录
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},
			// 跳转用户信息
			goUserDetail() {
				uni.navigateTo({
					url: '/pages/user/user-info/index'
				});
			},
			goAddress(){
				uni.navigateTo({
					url: '/pages/user/user-address/index'
				});
			},
			logout() {
				let that = this;
				uni.showModal({
					content: '确认退出系统吗？',
					cancelText: '我再想想',
					success(res) {
						if (res.confirm) {
							// uni.removeStorageSync('hx-token'); // 清除 hx-token
							that.$store.dispatch("Logout").then(() => {
								getApp().globalData.shoppingCartCount = 0;
								uni.reLaunch({
									url: '/pages/home/index'
								});
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F8F8F8;
}
.bgLiner{
	background: #fff;
	color: #000;
}
.logout{
	height: 90rpx;
	text-align: center;
	color: #000;
	line-height: 80rpx;
	border-top: 7px solid #f8f8f8;
	letter-spacing: 1px;
}
.setup-con{
	border-top: 4px solid #F8F8F8;
	width: 100%;
	background-color: #fff;
	.setup-ul{
		.setup-li{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #F8F8F8;
			align-items: center;
				padding: 23.44rpx;
			.setup-li-left{
				display: flex;
				align-items: center;
				.imgStyle{
					width: 82rpx;
					height: 82rpx;
					border-radius: 50%;
					margin-right:16.41rpx ;
				}
				.textStyle{
					color: #000;
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>
